<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thmyleaf.org">
<head>
    <meta charset="UTF-8">
    <title>数据展示页面</title>
</head>
<style>
    * {
        padding: 0px;
        margin: 0px;
    }
    .title {
        width: 200px;
        height: 30px;
        margin-top: 10px;
        margin-left: 38%;
        background-color: aqua;
        text-align: center;
        font-size: 10px;
        font-style: oblique;
        letter-spacing: 4px;
        border-radius: 5px;
    }
    .book-group {
        width: 500px;
        height: 180px;
        background-color: bisque;
        margin-left: 18%;
        margin-top: 10px;
        padding-top: 5px;
        border-radius: 10px;
        border: darkgreen 1px solid;
    }
    .book-group .book-image {
        height: 175px;
        width: 160px;
        box-sizing: border-box;
        border-radius: 10px;
        margin-left: 5px;
        margin-bottom: 5px;
        float: left;
    }
    .book-group .book-sketch {
        background-color: cadetblue;
        height: 175px;
        width: 180px;
        border: purple 1px solid;
        box-sizing: border-box;
        border-radius: 10px;
        margin-left: 5px;
        margin-bottom: 5px;
        float: left;
    }
    .book-group .book-about {
        background-color: darkorange;
        height: 175px;
        width: 140px;
        border: purple 1px solid;
        box-sizing: border-box;
        border-radius: 10px;
        margin-left: 5px;
        margin-bottom: 5px;
        float: left;
    }
    .book-info .book-group .book-image .book-img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
    }
    .bs-title {
        font-size: 12px;
        font-style: normal;
        padding-left: 60px;
        color: purple;
    }
    .bs-content {
        font-size: 10px;
        margin-top: 5px;
    }
    .bk-abt {
        font-size: 8px;
        color: white;
        padding-top: 20px;
        padding-left: 10px;
    }
    .bk-buy {
        text-decoration: none;
        color: greenyellow;
        margin-top: 50px;
    }

    .btn {
        margin-top: 20px;
        margin-left: 24%;
    }

    .btn .btn-move {
        width: 50px;
        height: 20px;
        font-size: 13px;
        float: left;
    }
    .button_page {
        float: left;
        width: 40px;
        height: 20px;
    }
</style>
<body>
<div class="title">
    <h1>书籍信息展示</h1>
</div>
<div class="book-list" th:each="book:${bookLists}">
    <!--规定每页显示10条书籍的数据（主要是做一个分页操作）-->
    <div class="book-info">
        <div class="book-group">
            <!--图片-->
            <div class="book-image">
                <img th:src="${book.bookImageUrl}" class="book-img">
            </div>
            <!--书籍概述-->
            <div class="book-sketch">
                <span class="bs-title"><i>书籍概述</i></span>
                <br/>
                <span class="bs-content" th:text="${book.bookSkecth}"></span>
            </div>
            <!--书籍作者和价格-->
            <div class="book-about">
                <div class="bk-abt">
                    <!--书籍名称-->
                    <div class="book-name">
                        <span>书名:&nbsp;&nbsp;</span>
                        <span th:text="${book.bookName}"></span>
                    </div>
                    <!--作者信息-->
                    <div class="book-author">
                        <span>作者:&nbsp;&nbsp;</span>
                        <span th:text="${book.authorName}"></span>
                    </div>
                    <br/>
                    <!--价格信息-->
                    <div class="book-price">
                        <span>RMB:&nbsp;&nbsp;</span>
                        <span th:text="${book.bookPrice}"></span>
                    </div>
                    <div class="book-buy">
                        <a th:href="${book.bookBuyUrl}" class="bk-buy">购买链接</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--分页导航-->
<div class="page-nav">
    <div class="btn">
        <div id="btn-up">
            <input type="button" value="上一页" name="button_up" class="btn-move" onclick="upPage();">
        </div>
        <!--
            每页最多显示 5条数据
            第一页：0,1,2,3,4
            第二页：5,6,7,8,9
            第三页：10,11,12,13,14
            第k页的数据范围: [5*(k-1),5*k-1]
            实际上我们有两种方式：
                1. 一次性将数据全部读取出来，保存到list中，存放到model中，然后在页面中通过js控制分页
                2. 懒加载模式：就是点击一个page按钮，读取对应的数据，并展示，默认读取第一页的数据，并展示
            我们采取第二种：懒加载模式(这种使用于大规模数据的分页展示，客户端的响应时间短，用户体验好)
            当我们点击第j个按钮的时候，我们需要给第j个按钮添加属性diaabled,然后在点击其他按钮之后，取消该属性
            初始化第1个按钮设置为disabled
        -->

        <div id="btn-page">
            <div class="btn-page">
                <input type="button" value="1" name="btn_name" class="button_page" onclick="addDisabled(this)" disabled="disabled">
                <input type="button" value="2" name="btn_name" class="button_page" onclick="addDisabled(this)">
                <input type="button" value="3" name="btn_name" class="button_page" onclick="addDisabled(this)">
                <input type="button" value="4" name="btn_name" class="button_page" onclick="addDisabled(this)">
                <input type="button" value="5" name="btn_name" class="button_page" onclick="addDisabled(this)">
                <input type="button" value="6" name="btn_name" class="button_page" onclick="addDisabled(this)">
            </div>
        </div>
        <div id="btn-down">
            <input type="button" value="下一页" name="button_down" class="btn-move" onclick="downPage();">
        </div>
    </div>
</div>
</body>
<script>
    <!-- 添加分页按钮被选中的效果脚本 -->
    addDisabled = function (button){
<!--        var buttonList = document.getElementsByClassName("button_page");-->
<!--        for(var i = 0; i < buttonList.length; i++) {-->
<!--            if(button.getAttribute("value") == buttonList[i].getAttribute("value")) {-->
<!--                // 设置当前选中的button为被选中的状态-->
<!--                buttonList[i].setAttribute('disabled','disabled');-->

<!--            } else {-->
<!--                buttonList[i].removeAttribute("disabled","disabled");-->
<!--            }-->
<!--        }-->
        button.setAttribute('disabled','disabled');
        // 发送请求到PageController实现当前页的数据展示 注意请求路径中我们需要添加起始索引的参数
        // 否则后台无法拿到当前的起始索引
        window.location.href = "http://localhost:9090/page/do-page-nav?start=" + button.getAttribute('value') + "&disabled=" + "true";
    }


    <!-- 实现翻页脚本 -->
    /* 实现翻页脚本 */
		upPage = function () {
			var buttonList = document.getElementsByClassName("button_page");
			// 先判断当前能否向前翻页
			if(buttonList[0].getAttribute('value') == 1) {
				return; // 无法翻页
			}
			for(var i = 0; i < buttonList.length; i++) {
				buttonList[i].setAttribute('value',parseInt(buttonList[i].getAttribute('value'),10) - 1);
			}
		}
		// 假设一页5条数据，一共有47条数据，一共有10页数据，前9页是满的，第10页不是
		// 所以我们在获取之前先获取所有t_book中的条数，来判断是否可以翻页
		// 1 2 3 4 5 6
		// 2 3 4 5 6 7
		// 3 4 5 6 7 8
		// 4 5 6 7 8 9
		// 5(只有这个按钮可以) 6 7 8 9 10
		downPage = function () {
			var buttonList = document.getElementsByClassName("button_page");
			// 判断能够否向后翻页
			for(var i = 0; i < buttonList.length; i++) {
				buttonList[i].setAttribute('value',parseInt(buttonList[i].getAttribute('value'),10) + 1);
			}
		}
</script>
</html>